<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router filter</title>
</head>
<body>
router filter
<script>
  var asyncRouterMap = [
  {
    name: 'permission',
    meta: {
      roles: ['admin'] // you can set roles in root nav
    },
    children: [
    {
      name: 'pagePermission',
      meta: {
        roles: ['editor']
      }
    },
    {
      name: 'directivePermission',
      meta: {
        title: 'directivePermission'
      }
    }]
  }
  ,
  {
    name: 'icon',
    children: [{
      name: 'icons',
      meta: { title: 'icons', icon: 'icon', noCache: true }
    }]
  }
]

    var roles=["editor"]

  /**
   * 通过meta.role判断是否与当前用户权限匹配
   * @param roles
   * @param route
   */
  function hasPermission(roles, route) {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.indexOf(role) >= 0)
    } else {
      return true
    }
  }

  function filterAsyncRouter(asyncRouterMap, roles) {
    const accessedRouters = asyncRouterMap.filter(route => {
      if (hasPermission(roles, route)) {
        if (route.children && route.children.length) {
          route.children = filterAsyncRouter(route.children, roles)
        }
        return true
      }
      return false
    })
    return accessedRouters
  }

  console.log(filterAsyncRouter(asyncRouterMap, roles))

</script>
</body>
</html>
